<template>
  <div class="page-header">
    <div class="weui-flex">
      <h5 class="title">{{title}}</h5>
        <slot name="switch"></slot>
        <div v-if="tip.length>0" class="tip">
          <el-tag closable type="warning">{{tip}}</el-tag>
        </div>
    </div>

    <div class="btn-area">
      <slot name="addon"></slot>
      <btn-groups :btns="btns" :max="max" class="page-btns"></btn-groups>
    </div>
  </div>
</template>
<script>
/**
 * 页面表单头部标题、按钮组件
 * 按钮采用btn-groups是组件，只需要传入数组即可
 */
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        btns: {
            type: Array,
            default() {
                return [];
            }
        },
        icon: {
            type: String,
            default: ''
        },
        iconColor: {
            type: String,
            default: ''
        },
        max: {
            type: Number,
            default: 3
        },
        tip: {
          type: String,
          default: ''
        }
    }
};
</script>
<style lang="scss" scoped>
.page-header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 10px;
}
.weui-flex {
  display: flex;
  align-items: center;

  .tip{
    margin-left: 20px;
  }
}
.title {
  text-align: left;
  line-height: 24px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #363a3f;
}

.page-btns {
  display: flex;
  align-items: center;
  >>> .btn-undefined {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;

    i {
      margin-right: 6px;
    }
  }
  >>> .el-button--primary {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    border: none;

    i {
      margin-right: 6px;
    }
  }
}
</style>
